<!DOCTYPE html>
<html>
<head>
    <title>{title}</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }}

        .container {{
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }}

        .header {{
            text-align: center;
            margin-bottom: 30px;
        }}

        .metrics {{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }}

        .metric-card {{
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }}

        .charts-row {{
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin: 20px 0;
        }}

        .chart-container {{
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            height: 300px;
        }}

        .pie-chart-container {{
            max-width: 400px;
            margin: 0 auto;
        }}

        .test-case {{
            background: #fff;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }}

        .test-step {{
            border-left: 3px solid #ddd;
            margin: 10px 0;
            padding: 10px 20px;
        }}

        .status-badge {{
            display: inline-block;
            padding: 5px 10px;
            border-radius: 4px;
            font-weight: bold;
        }}

        .status-pass {{
            background-color: #28a745;
            color: white;
        }}

        .status-fail {{
            background-color: #dc3545;
            color: white;
        }}

        .screenshot-container {{
            margin: 10px 0;
            text-align: center;
        }}

        .screenshot {{
            max-width: 800px;
            max-height: 400px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }}

        .error-message {{
            background-color: #fff3f3;
            border-left: 3px solid #dc3545;
            padding: 10px;
            margin: 10px 0;
        }}

        .modal {{
            display: none;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
        }}

        .modal-content {{
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 90%;
            margin-top: 2%;
        }}

        .close {{
            position: absolute;
            right: 35px;
            top: 15px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }}
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>{title}</h1>
        <p>测试执行时间: {test_time}</p>
    </div>

    <div class="metrics">
        <div class="metric-card">
            <h3>总执行时间</h3>
            <p>{total_duration} 秒</p>
        </div>
        <div class="metric-card">
            <h3>测试用例总数</h3>
            <p>{total_cases}</p>
        </div>
        <div class="metric-card">
            <h3>通过率</h3>
            <p>{pass_rate}%</p>
        </div>
    </div>

    <div class="metrics">
        <div class="metric-card">
            <h3>执行成功数</h3>
            <p>{passed_cases}</p>
        </div>
        <div class="metric-card">
            <h3>执行失败数</h3>
            <p>{failed_cases}</p>
        </div>
        <div class="metric-card">
            <h3>跳过执行数</h3>
            <p>{skipped_cases}</p>
        </div>
    </div>

    <div class="charts-row">
        <div class="chart-container pie-chart-container">
            <canvas id="resultPieChart"></canvas>
        </div>
    </div>

    <div class="test-cases">
        <h2>测试用例详细信息</h2>
        {test_cases_content}
    </div>
</div>

<div id="imageModal" class="modal">
    <span class="close" onclick="closeModal()">&times;</span>
    <img class="modal-content" id="modalImage">
</div>

<script>
    // 结果饼图
    new Chart(document.getElementById('resultPieChart'), {{
        type: 'pie',
        data: {{
            labels: ['通过', '失败', '跳过'],
            datasets: [{{
                data: [{passed_cases}, {failed_cases}, {skipped_cases}],
                backgroundColor: ['#28a745', '#dc3545', '#ffc107'],
                borderWidth: 1
            }}]
        }},
        options: {{
            responsive: true,
            maintainAspectRatio: true,
            plugins: {{
                title: {{
                    display: true,
                    text: '测试执行结果分布'
                }},
                legend: {{
                    position: 'bottom'
                }}
            }}
        }}
    }});

    // 步骤执行时间趋势图
    new Chart(document.getElementById('stepTimeTrend'), {{
        type: 'line',
        data: {{
            labels: {case_step_labels},
            datasets: [{{
                label: '步骤执行时间（秒）',
                data: {step_durations},
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }}]
        }},
        options: {{
            responsive: true,
            maintainAspectRatio: true,
            plugins: {{
                title: {{
                    display: true,
                    text: '步骤执行时间趋势'
                }}
            }},
            scales: {{
                y: {{
                    beginAtZero: true,
                    title: {{
                        display: true,
                        text: '执行时间（秒）'
                    }}
                }}
            }}
        }}
    }});

    // 图片模态框相关函数
    function showImage(src) {{
        var modal = document.getElementById("imageModal");
        var modalImg = document.getElementById("modalImage");
        modal.style.display = "block";
        modalImg.src = src;
    }}

    function closeModal() {{
        document.getElementById("imageModal").style.display = "none";
    }}

    window.onclick = function(event) {{
        var modal = document.getElementById("imageModal");
        if (event.target == modal) {{
            modal.style.display = "none";
        }}
    }}
</script>
</body>
</html>